
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   /* 第一个div样式 */
   #one {
    height: 300px;
    width: 300px;
    background: red;
   }

   /* 第二个div样式 */
   #two {
    height: 200px;
    width: 200px;
    background: #FFFF00;

   }
  </style>
 </head>
 <body>
  <div id="one">
   <div id="two">
    <button id="btn">请点击按钮</button>
   </div>
  </div>


  <script type="text/javascript">
   //获取第一个div
   var div1 = document.querySelector("#one")
   //获取第二个div
   var div2 = document.querySelector("#two")
   //获取按钮
   var btn = document.querySelector("#btn")
   //点击按钮 
   btn.onclick = function() {
    //中间盒子黄变红 边框2px变4
    div2.style.background = "red"
    div2.style.border = "4px solid black"
    //最外边盒子  红变黄 大小200px 变500px
    div1.style.background = "yellow"
    div1.style.height = "500px"
    div1.style.width = "500px"
    btn.style.background = ""
   }
   // 点击最外面的盒子 大小变回去 按钮变绿
   div1.addEventListener("click", function() {
     div1.style.height = "300px"
     div1.style.width = "3000px"
     btn.style.background = "black"
    },
    true)
  </script>
 </body>
</html>


